import { defineView } from "@/routers/tools.mjs";

/**
 * @typedef {{ title: string;content: string;}} TradeType
 */
class TradeData {
  /**
   * @type {TradeType[]}
   */
  trades = [
    {
      title: "EUR",
      content: "Euro",
    },
    {
      title: "USD",
      content: "United States dollar",
    },

    {
      title: "JPY",
      content: "Japan Yen",
    },
    {
      title: "HKD",
      content: "Hong Kong dollar",
    },
  ];

  handleClick() {
    console.log("this", this);
  }
}
/**
 * @param {TradeType | null} newValue
 * @param {TradeType | null} oldValue
 * @returns {boolean}
 */
function compareTradePartialEq(newValue, oldValue) {
  if (newValue === null && oldValue === null) {
    return true;
    // 其实可以合并,但是这样会影响 review
    // assert前提: title成员的值不可为 null
  } else if (newValue?.title === oldValue?.title) {
    return true;
  }
  return false;
}
class DropdownModalCtrl extends TradeData {
  /**
   * @override
   */
  static $inject = ["$scope", "$log", "$filter"];

  get selectedTradeName() {
    if (this.selectedTrade) {
      return this.selectedTrade.title;
    }
    return "";
  }

  /**
   * @param {ng.IScope} $scope
   * @param {ng.ILogService} $log
   * @param {ng.IFilterService} $filter
   */
  constructor($scope, $log, $filter) {
    super();
    this.$scope = $scope;
    this.$log = $log;
    this.$filter = $filter;
    /**
     * @type {{isOpen: boolean}}
     */
    this.status = {
      isOpen: false,
    };
    /**
     * @type {TradeType | null}
     */
    this.selectedTrade = null;
  }

  async $onInit() {
    const storedTrade = sessionStorage.getItem("storedTrade");
    if (storedTrade === null || storedTrade === "null") {
      // ! KEEP
      this.selectedTrade = null;
    } else {
      // eslint-disable-next-line jsdoc/no-restricted-syntax
      this.selectedTrade = /** @type {*} */ (
        JSON.parse(angular.copy(storedTrade))
      );
    }
    console.log(
      "getSessionStorage [selectedTrade]",
      angular.toJson(this.selectedTrade),
    );
    this.$scope.$watch(
      /**
       * @param {ng.WIScope} $scope
       * @returns {TradeType | null}
       */
      ($scope) => /** @type {this} */ ($scope.$dropdownModal).selectedTrade,
      (newValue, oldValue) => {
        if (!compareTradePartialEq(newValue, oldValue)) {
          sessionStorage.setItem("storedTrade", angular.toJson(newValue));
          console.log(
            "setSessionStorage [selectedTrade]",
            sessionStorage.getItem("storedTrade"),
          );
        }
      },
    );
  }

  /**
   * @override
   */
  handleClick() {
    this.$log.info("this", this);
  }
}

/**
 * @type {DefineView}
 */
const uibDropdownModalView = defineView({
  controller: DropdownModalCtrl,
  controllerAs: "$dropdownModal",
  template: /* HTML */ html`
    <div class="px-2 py-4">
      <div
        class="btn-group"
        uib-dropdown
        is-open="$dropdownModal.status.isOpen"
      >
        <button
          id="single-button"
          type="button"
          class="btn btn-primary"
          uib-dropdown-toggle
        >
          {{ $dropdownModal.selectedTradeName | filter:withParenthesisAssemble
          }}
          <span class="caret"></span>
        </button>
        <ul
          class="dropdown-menu"
          uib-dropdown-menu
          role="menu"
          aria-labelledby="single-button"
          style="font-family: monospace;"
        >
          <li
            role="menuitem"
            ng-repeat="trade in $dropdownModal.trades track by trade.title"
          >
            <a href="" ng-click="$dropdownModal.selectedTrade = trade;">
              >{{ trade.title }} | {{ trade.content }}</a
            >
          </li>
        </ul>
      </div>

      <hr />
      ${DebugButtonHTML("$dropdownModal")}
    </div>
  `,
});

export default uibDropdownModalView;
